import React, { useEffect, useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, Table, Button, message } from 'antd'
import { rushOrderCenter, addRentOrder } from '@/services/order'

const Count = () => {
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)
  const [pageInfo, setPageInfo] = useState({
    pageNumber: 1,
    pageSize: 50,
  })
  const [list, setList] = useState([])
  const styles = {
    spanWidthStyles: {
      width: '70px',
      'text-align-last': 'justify',
      display: 'inline-block'
    },
    formItemStyles: {
      width: '200px'
    }
  }

  const loadList = async () => {
    rushOrderCenter(pageInfo).then(res => {
      setLoading(false)
      setList(res.data.records)
      setTotal(res.data.total)
    })
  }

  useEffect(() => {
    loadList()
  }, [pageInfo])
  
  const confirm = async data => {
    let res = await addRentOrder({
      "originalOrderNo": data.orderId,
      "orderSource": "02"
      })
    if(res){
      message.success('恭喜您，抢单成功～');
      loadList();
    }
  }

  const columns = [
    {
      title: '订单ID',
      dataIndex: 'orderId',
      align: 'center'
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      align: 'center'
    },
    {
      title: '规格',
      dataIndex: 'spec',
      align: 'center'
    },
    {
      title: '下单时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'name4',
      align: 'center',
      render: (text, record) => (
        <span>
          <Button type="link" size="small"  onClick={() => confirm(record)}>
              抢单
            </Button>
        </span>
      )
    }
  ]

  const PaginationOptions = {
    current: pageInfo.pageNumber,
    pageSize: pageInfo.pageSize,
    total,
    showTotal: total => {
      return `共${total}条`
    },
    onChange: pageNumber => {
      setPageInfo({ ...pageInfo, pageNumber })
    }
  }

  return (
    <>
      <PageHeaderWrapper>
        <Card>
          <Table
            loading={loading}
            rowKey="orderNo"
            dataSource={list}
            columns={columns}
            pagination={PaginationOptions}
          />
        </Card>
      </PageHeaderWrapper>
    </>
  )
}

export default Count
